<template>
  <div class="container"
       v-if="ticket_info">
    <div class="t-l">
      <div class="t-name">
        <div class="tip">[{{ticket_info.ticket_type_name}}]</div>
        <div class="msg">{{ticket_info.name}}</div>
      </div>
      <div class="t-hos">
        {{ticket_info.source_name}}
      </div>
      <div class="t-date">
        <div class="date-tip">有效期</div>
        <div class="data-msg">
          {{ticket_info.validity_start_time}}~{{ticket_info.validity_end_time}}
        </div>
      </div>
    </div>
    <div class="t-r">
      <div class="p-title"
           v-if="(!ticket_info.card_user_str||ticket_info.card_user_str=='')&&(!ticket_info.user_name||ticket_info.user_name=='')">
        兑换价
      </div>
      <div class="p-detail">
        <div class="icon">￥</div>
        <div class="num">
          {{ticket_info.sale_price||ticket_info.price}}
        </div>
      </div>
      <div class="lowest"
           v-if="(ticket_info.deduction_number&&ticket_info.deduction_number!=0)">
        最低可至{{ticket_info.ice_price}}
      </div>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'

export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
    }
  },
  props: ["ticket_info"]
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 121px;
  display: flex;
  .t-l {
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    flex: 1;
    border-right: 1px dashed rgba(246, 210, 210, 1);
    position: relative;
    padding: 14px;
    box-sizing: border-box;
    .t-name {
      .tip {
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
        display: inline-block;
        vertical-align: middle;
        margin-right: 2px;
      }
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        display: inline-block;
        vertical-align: middle;
      }
    }
    .t-hos {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-top: 10px;
    }
    .t-date {
      position: absolute;
      left: 14px;
      bottom: 14px;
      .date-tip {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(204, 204, 204, 1);
        display: inline-block;
        vertical-align: middle;
        margin-right: 4px;
      }
      .data-msg {
        font-size: 12px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .t-r {
    width: 100px;
    height: 122px;
    border-radius: 8px;
    background: linear-gradient(
      180deg,
      rgba(255, 244, 243, 1) 0%,
      rgba(255, 232, 233, 1) 100%
    );
    padding: 15px 0;
    box-sizing: border-box;
    position: relative;
    .p-title {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 56, 62, 1);
      line-height: 16px;
      text-align: center;
    }
    .p-detail {
      text-align: center;
      margin-top: 9px;
      .icon {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(255, 56, 62, 1);
        display: inline-block;
        vertical-align: bottom;
      }
      .num {
        font-size: 21px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(255, 56, 62, 1);
        display: inline-block;
        vertical-align: bottom;
      }
    }
    .lowest {
      width: 100%;
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 56, 62, 0.6);
      line-height: 17px;
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
  }
}
</style>